<template>
  <div ref="chartRef" class="chartst"></div>
</template>

<script lang="ts" setup>
import {onMounted, ref, watch} from "vue";
import * as echarts from "echarts";
import {usePipeStore} from "../../../store/pipe";
const pipeStore = usePipeStore()

let option = {
  title: {
    text: '地区水压图',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {}
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [40, 160],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: pipeStore.cityData
    }
  ]
};


const chartRef = ref<HTMLDivElement | null>(null)
onMounted(() => {
  if (chartRef.value) {
    let myChart = echarts.init(chartRef.value as HTMLDivElement);
    myChart.setOption(option)
    watch(pipeStore.cityData, () => {
      if (1) {
        myChart.setOption(option)
      }
    }, {deep: true, immediate: true})
  }
})
</script>

<style scoped>
.chartst {
  width: 640px;
  height: 500px;
}
</style>
